<template>
    <div >
        <ul class="tree">
            <li data-type="folder" v-for="item in treeDto"  :data-content="item?.resultPrompt">
                <span class="folder">{{ item.fileName }}</span>
                <ul class="children" v-if="item.children">
                    <li :data-type="citem.children ? 'folder' : 'file'" v-for="citem  in item.children"
                        :data-content="citem.resultPrompt"
                        :class="!citem.children ?'file':''"
                        >
                        <span :class="citem.children ? 'folder' : 'file-name'">{{ citem.fileName }}</span>
                        <tree v-if="citem.children" :treeDto="citem.children"></tree>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    treeDto: Array
})

</script>
<style scoped>
.tree {
  width: 400px;
  padding: 30px;
  overflow-y: auto;
}

.tree ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tree li {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 5px;
}

.tree li:before {
  content: "▶";
  color: rgb(255, 215, 0);
  margin-right: 10px;
  transition: transform 0.3s;
}

.tree li.file:before {
  content: "";
  color: rgb(255, 215, 0);
  margin-right: 10px;
  transition: transform 0.3s;
}

.tree li:hover {
  background-color: #3b3b3b;
  color: #fff;
}

.tree li.active {
  /*background-color: #0634e3;*/
  color: #fff;
  font-weight: bold;
}

.tree li.active:before {
  transform: rotate(90deg);
}

.tree .children {
  display: none;
  padding-left: 20px;
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tree .file-name {
  color: #ccc;
}

.tree .folder {
  color: rgb(255, 215, 0);
  font-weight: bold;
}
</style>